import { useEffect, useState, useRef } from 'react';
import { Button, Card } from 'antd';
import { ProForm, ProFormDateRangePicker, ProFormSelect } from '@ant-design/pro-components';
import styles from './index.module.less';
import { arrayToEnum, enumToArray, getTimestamp } from '@/utils';
import { quickTime } from '@/utils/helper';
import dayjs from 'dayjs';

const quickTimeList: any = enumToArray(quickTime);

// isNomalTime是否正常时间，默认时时间戳
export default function FilterSelect({ fields, reload, isNomalTime = false }: any) {
  const initTime = quickTimeList[1]?.value;
  const [curTime, setCurTime] = useState<any>();
  const formRef: any = useRef(null);

  useEffect(() => {
    initData();
  }, []);

  // 初始化数据
  const initData = () => {
    const arr = fields.map((item: any) => ({
      name: item?.name,
      value: Object.keys(item?.enum)[0],
    }));
    setCurTime(initTime);
    formRef.current.setFieldsValue({
      ...arrayToEnum(arr),
      dateRange: [dayjs().subtract(6, 'days'), dayjs()],
    });
    onValuesChange();
  };

  // 修改
  function changeQTime(curTime: any) {
    setCurTime(curTime);
    formRef.current.setFieldsValue({
      dateRange: [dayjs().subtract(curTime - 1, 'days'), dayjs()],
    });
    onValuesChange();
  }

  async function onValuesChange() {
    const formatData = await formRef?.current?.validateFieldsReturnFormatValue();
    reload(formatData);
  }

  return (
    <div className={styles.filterSelectWrap}>
      <ProForm
        title="新建表单"
        formRef={formRef}
        layout="inline"
        submitter={{ render: false }}
        onValuesChange={onValuesChange}
      >
        {fields.map((item: any, i: number) => (
          <ProFormSelect
            width={100}
            key={i}
            name={item?.name}
            valueEnum={item?.enum}
            placeholder="请选择"
          />
        ))}
        <div className={`${styles.quickTWrap} flex`}>
          {/* <div className={styles.tline}></div> */}
          {quickTimeList.map((item: any, i: number) => (
            <div
              className={`${styles.qitem} ${curTime === item.value && styles.qitemAct} center`}
              key={i}
              // onClick={() => setCurTime(item?.value)}
              onClick={() => changeQTime(item?.value)}
            >
              {item?.name}
            </div>
          ))}
        </div>
        {!isNomalTime ? (
          <ProFormDateRangePicker
            name="dateRange"
            width={208}
            transform={(val) => ({
              from: val ? `${getTimestamp(`${val[0]} 00:00:00`)}` : null,
              to: val ? `${getTimestamp(`${val[1]} 23:59:59`)}` : null,
            })}
          />
        ) : (
          <ProFormDateRangePicker
            name="dateRange"
            width={208}
            transform={(e: any) => ({ startTime: e[0], endTime: e[1] })}
          />
        )}

        <Button color="default" variant="link" onClick={initData} style={{ padding: 0 }}>
          重置
        </Button>
        {/* <Button onClick={submit}>提交</Button> */}
      </ProForm>
    </div>
  );
}
